<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他样式的属性</title>
    <style>
        #box1{
            width: 50px;
            height: 50px;
            background-color: rgb(31, 123, 204);
            padding: 10px;
            border: 10px solid red;
        }
        #box2{
            padding: 20px/* 上*/ 0px/* 右*/ 5px/* 下*/ 40px/* 左*/;
            background-color: aquamarine;
        
        }
        #box4{
            width: 200px;
            height: 300px;
            background-color: aqua;
            overflow: auto;
        }
        #box5{
            width: 600px;
            height: 600px;
            background-color: blueviolet;
        }
    </style>
</head>
<body id="body">
    <div id="box2" style="position: relative;">
        <div id="box1"></div>
    </div>
    
    <br>
    <div id="box4">
        <div id="box5"></div>
    </div>
    <br>
    <button id="btn01" style="float:right;">点击按钮</button>
</body>
</html>
<script>
    var box1 = document.getElementById("box1");
    var btn01 = document.getElementById("btn01");
    var box4 = document.getElementById("box4");
    btn01.onclick=function(){
        /*
            clientWitdh  ⭐⭐📌
            clientHeight ⭐⭐📌
                - 这两个属性可以获取元素的 宽度 和 高度
                - 这些属性都是不带 px 的，返回都是一个数字， 可以直接进行计算
                - 会获取元素宽度和高度，包括内容区和内边距 ，不包括border 
                - 这些属性都是只读的，不能修改❗
        */
        // alert(box1.clientWidth);

        /*
            offsetWidth   ⭐⭐📌
            offsetHeight  ⭐⭐📌
                - 获取元素的整个 宽度和高度 ，包括内容区和边框(border)
        */
        // alert(box1.offsetWidth);

        /*
            offsetParent    ⭐
                - 可以用来获取当前的定位父元素
                - 会获取到离当前元素最近的开启了定位的祖先元素
                - 如果所有祖先元素都没有开启定位，则返回 body
        */
        var op = box1.offsetParent;
        // alert(op.id);

        /*
            offsetLeft  ⭐⭐📌
                - 当前元素相对于其定位父元素的水平偏移量
            offsetTop   ⭐⭐📌
                - 当前元素相对于其定位父元素的垂直偏移量
        */
        // alert("Left = "+box1.offsetLeft+" Top = "+box1.offsetTop);

        /*
            scrollWidth ⭐⭐📌
            scorllHeight⭐⭐📌
                - 可以获取元素整个滚动区域的 高度和宽度
        */
        // alert(box4.scrollWidth); 宽
        // alert(box4.scrollHeight);  高

        /*
            scorllLeft  ⭐⭐📌
                - 可以获取水平滚动条的距离
            scorllTop   ⭐⭐📌
                - 可以获取垂直滚动条的距离
        */
        // alert(box4.scrollLeft);  水平
        // alert(box4.scrollTop);   垂直

        /*
            clientWidth    ⭐⭐📌 顶部第一个
            clientHeight   ⭐⭐📌
                - 这两个属性可以获取元素的可见 宽度和高度
                - 这些属性都是不带 px 的，返回都是一个数字，可以直接进行计算
                - 会获取元素宽度和高度，包括 内容区和内边距
                - 这些属性都是只读的，不能修改
        */

        /*
            当满足scrollHeight - scrollTop == clienHeight 时
                说明垂直滚动条，到底了  ⭐⭐📌
            当满足scrollWidth - scrollLeft == clienWidth 时
                说明水平滚动条，到底了  ⭐⭐📌
        */
        // alert(box4.clientHeight);   // 283
        // alert(box4.scrollHeight - box4.scrollTop );
    };
    
</script>